<template>
  <map-marker-filter
    v-model="selectMenus"
    v-bind="$attrs"
    :data-list="filterMenus"
    :all-controller="allController"
    :area-controller="areaController"
    :community-controller="communityController"
    :grid-controller="gridController"
    :default-area-polygon-checked="defaultAreaPolygonChecked"
    :default-community-polygon-checked="defaultCommunityPolygonChecked"
    :default-grid-polygon-checked="defaultGridPolygonChecked"
    :default-unchecked-keys="defaultUncheckedMenus"
    :build-controller="buildController"
    :default-build-checked="defaultBuildChecked"
    :all-points-controller="allPointsController"
  />
</template>

<script>
import get from 'lodash-es/get.js';
import isEmpty from 'lodash-es/isEmpty.js';
import debounce from 'lodash-es/debounce.js';
import { replaceFields } from '@gis/lib/utils/index.js';
import { getMarkerLegendIcon } from '../js/icon.js';
import MapMarkerFilter from './map-marker-filter.vue';
import filterLegends from './js/filter-legends.js';

export default {
  name: 'map-filter',
  components: { MapMarkerFilter },
  props: {
    customFilterMenus: { type: Function }, //自定义menus样式
  },
  data() {
    return {
      filterMenuData: {},
      filterMenus: [],
      selectMenus: [],
      allController: true,
      areaController: true,
      communityController: true,
      gridController: true,
      defaultAreaPolygonChecked: true,
      defaultCommunityPolygonChecked: true,
      defaultGridPolygonChecked: false,
      defaultUncheckedMenus: [],

      buildController: true, //楼栋3D模型switch是否显示
      defaultBuildChecked: true, //楼栋3D模型switch默认值
      allPointsController: false, //点控制Switch是否显示
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler: debounce(function () {
        this.init();
      }),
    },
  },
  created() {
    this.$vbus.$on(
      'pointTypeChange',
      async ({
        pointList = [],
        defaultUncheckedMarkers = [],
        defaultAreaPolygonChecked,
        defaultCommunityPolygonChecked,
        defaultGridPolygonChecked,
      }) => {
        await this.getDataAsync();
        this.defaultAreaPolygonChecked = defaultAreaPolygonChecked;
        this.defaultCommunityPolygonChecked = defaultCommunityPolygonChecked;
        this.defaultGridPolygonChecked = defaultGridPolygonChecked;

        this.defaultUncheckedMenus = defaultUncheckedMarkers;
        this.filterMenus = pointList.map((type) => this.filterMenuData[type]).filter(Boolean);
      }
    );
  },
  methods: {
    async init() {
      await this.getDataAsync();
      await this.updateFilterMenu();
    },
    async getDataAsync() {
      if (!isEmpty(this.filterMenuData)) {
        return;
      }
      /* TODO: 替换为线上 tl_menu.json */
      // const res = await this.$axios.get("/page/projection-screen/tl_menu.json");
      // const res = import('./js/filter-legends.js');
      const list = replaceFields(filterLegends, {
        icon: (item) => getMarkerLegendIcon(item.icon),
        label: 'name',
        value: 'type',
        children: 'nodes',
      });
      this.filterMenuData = list.reduce((res, item) => {
        return Object.assign(res, { [item.value]: item });
      }, {});
      // console.log('this.filterMenuData: ', this.filterMenuData);
    },
    async updateFilterMenu() {
      const { meta } = this.$route;
      let defaultUncheckedMarkers = get(meta, 'defaultUncheckedMarkers') || [];
      let defaultUncheckedPolygons = get(meta, 'defaultUncheckedPolygons') || [];

      let allController = get(meta, 'allController');
      let areaController = get(meta, 'areaController');
      let communityController = get(meta, 'communityController');
      let gridController = get(meta, 'gridController');

      let buildController = get(meta, 'showBuildings', true); //楼栋3D模型是否显示
      let defaultCheckedBuild = get(meta, 'defaultUncheckedBuild', true); //楼栋3D模型switch开or关
      this.buildController = buildController;
      this.defaultBuildChecked = !this.buildController ? false : defaultCheckedBuild; //开关不显示，switch为false

      // 点控制switch开关显示 - 默认不显示
      this.allPointsController = get(meta, 'showAllPointsController', false);

      let option = get(meta, 'marker') || [];
      if (!Array.isArray(option)) {
        option = [option];
      }
      // switch默认值
      if (defaultUncheckedPolygons.includes('area')) {
        this.defaultAreaPolygonChecked = false;
      } else {
        this.defaultAreaPolygonChecked = undefined; // 使用默认值
      }
      if (defaultUncheckedPolygons.includes('community')) {
        this.defaultCommunityPolygonChecked = false;
      } else {
        this.defaultCommunityPolygonChecked = undefined; // 使用默认值
      }
      if (defaultUncheckedPolygons.includes('grid')) {
        this.defaultGridPolygonChecked = false;
      } else {
        this.defaultGridPolygonChecked = undefined; // 使用默认值
      }
      // switch是否显示
      if (typeof allController === 'boolean') {
        this.allController = allController;
      }
      if (typeof areaController === 'boolean') {
        this.areaController = areaController;
      }
      if (typeof communityController === 'boolean') {
        this.communityController = communityController;
      }
      if (typeof gridController === 'boolean') {
        this.gridController = gridController;
      }

      this.defaultUncheckedMenus = defaultUncheckedMarkers;

      let showList = option.map((type) => this.filterMenuData[type]).filter(Boolean);

      // 自定义菜单样式
      if (typeof this.customFilterMenus === 'function') {
        showList = await this.customFilterMenus(showList);
      }

      this.filterMenus = showList;
    },
  },
  unmounted() {
    this.$vbus.$off('pointTypeChange');
  },
};
</script>
